<template>
  <div class="ctbsc-vip">
    <div class="main">
      <img src="/static/picture/vip_bg_pc.jpg" width="100%">
      <div class="container">
        <div class="content-wrap clearfix">
          <div class="content">
            <article class="vip-article">
              <header class="article-header">
                <h1 class="article-title center">VIP套餐</h1>
                <div class="vip-desc">
                  <p class="actives" >虚拟产品，一经支付，概不退款！</p>
                  <p  class="actives" >
                    <span style="color: red" >除首试会员外，会员期内提前购买任何类型会员，享受8.5折优惠！</span>
<!--                    <span style=" color: red;font-size:xx-large;font-weight: 800 " >双11特惠活动，仅限11.11-11.15，仅5天</span>-->
                  </p>
                </div>
              </header>
              <div class="vip-content clearfix" id="container">

                <div :class="'vip-item item-'+(index+1)" v-for="(item,index) in memberType" >
                  <h6>{{item.title}}</h6>
                  <span class="price"><small>￥</small>{{item.price}}</span>
                  <p class="border-decor"><span class="active">{{item.during}}</span></p>
                  <ul>
                    <li >
                      <span v-if="item.stand_price!=item.price" style="text-decoration:line-through;color:#ccc;font-size: 20px"><small>￥</small>{{item.stand_price}}</span>
                      <span v-else style="text-decoration:line-through;color:#ccc;font-size: 20px"><small></small></span>

                    </li>
                    <li class="actives">{{item.desc}}</li>
                  </ul>
                  <a href="javascript:;" @click="wechatPay(item)"  class="btn btn-small btn-vip-action">{{item.btn}}</a>
                  <!--<a href="javascript:;" v-if="$store.getters.userInfo&&$store.getters.userInfo.member_type==item.key" style="background: #ddd !important;" class="btn btn-small btn-vip-action">已开通</a>
                  <a href="javascript:;" @click="wechatPay(item)" v-else class="btn btn-small btn-vip-action">立即开通</a>-->



                </div>
              </div>
              <div class="bgbtn"></div>
            </article>
          </div>
        </div>
      </div>
      <div class="container" style="padding-top: 30px;">
        <div class="content-wrap">
          <div class="content">
            <div class="vip-article">
              <header class="article-header">
                <h1 class="article-title center actives">VIP权益</h1>
              </header>
              <div class="container">
                <div class="items">
                  <div class="article-content" id="vip_content">
                    <section data-role="outer" label="Powered by 135editor.com" style="">
                      <section data-role="outer" label="Powered by 135editor.com" style=""><p
                              style="vertical-align:inherit;line-height: 1.75em;"><span
                              style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益一：</span><span
                              style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                              style="color: rgb(0, 0, 0); font-size: 16px; caret-color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;"></span><span
                              style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">5年老平台</span><span
                              style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                              style="color: rgb(0, 0, 0); font-size: 16px; caret-color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">➕</span><span
                              style="font-size: 16px; caret-color: red; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">全站内容不限次数下载</span><span
                              style="font-size: 16px; caret-color: red;">➕</span><span
                              style="font-size: 16px; caret-color: red; color: #FF0000;">未来365天在</span><span
                              style="font-size: 16px; caret-color: red;">（</span><span
                              style="font-size: 16px; caret-color: red; color: #FF0000;">网站</span><span
                              style="font-size: 16px; caret-color: red;">➕</span><span
                              style="font-size: 16px; caret-color: red; color: #FF0000;">会员群</span><span
                              style="font-size: 16px; caret-color: red;">）</span><span
                              style="font-size: 16px; caret-color: red; color: #FF0000;">获取每天更新的最新材料</span><span
                              style="font-size: 16px; caret-color: red;">➕</span><span
                              style="font-size: 16px; caret-color: red; color: #FF0000;">内部整理写作必备资料包</span><span
                              style="font-size: 16px; caret-color: red;">；</span></span></span></p>
                        <p style="vertical-align:inherit;line-height: 1.75em;"><br></p>
                        <p style="vertical-align:inherit;line-height: 1.75em;"><span
                                style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益二：</span><span
                                style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;">在线查阅/下载网站所有素材；<span
                                style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;"></span>，跟随年度任务走，什么阶段什么任务，出什么材料，<span
                                style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">每日更新</span>，任意下载；</span>
                        </p>
                        <p style="vertical-align:inherit;line-height: 1.75em;"><br></p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                style="font-size: 16px; color: rgb(0, 176, 80); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">会员权益三：</span><span
                                style="color: rgb(0, 0, 0); font-size: 16px; display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                style="color: rgb(255, 0, 0); font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"></span><span
                                style="font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">专属客服一对一帮您找材料</span>，全天18小时在线服务，随时可为您找材料！客服微信：<span
                                style="font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">ctbsc2021</span></span>
                        </p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益四：</span><span
                                style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;">开通会员后，可在<span
                                style="font-size: 16px; caret-color: red; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">微信公众号端/电脑端</span>浏览器同步使用；</span>
                        </p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益五：</span><span
                                style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                style="color: rgb(255, 0, 0); font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"></span>会员用户在会期内续费，享受<span
                                style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">9折</span>优惠;</span>
                        </p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益六：</span><span
                                style="font-size: 16px; font-family: 楷体, 楷体_GB2312, SimKai;"><span
                                style="font-size: 16px; color: rgb(255, 0, 0); font-family: 楷体, 楷体_GB2312, SimKai;">会员专享单独发资料</span>，个别专题资料不想大海捞针式下载，可以联系客服私发单个专题资料包。</span>
                        </p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><br></p>
                        <p style="vertical-align:inherit; line-height: 1.75em;"><span
                                style="font-size: 16px; color: rgb(0, 176, 80); font-family: 楷体, 楷体_GB2312, SimKai;">会员权益七：</span><span
                                style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(0, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">添加客服微信：ctbsc2021，进入<span
                                style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">会员群</span>➕<span
                                style="caret-color: rgb(255, 0, 0); font-size: 16px; color: rgb(255, 0, 0); display: inline !important; font-family: 楷体, 楷体_GB2312, SimKai;">领取资料包</span>！</span><span></span>
                        </p>
                        <p style="vertical-align:inherit;"><img
                                src="/static/picture/F1h1PxsJ0PzjPp1.png"
                                width="100%" alt="F1h1PxsJ0PzjPp1.png"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="0.5555555555555556" data-w="900"></p>
                        <p style="vertical-align:inherit;"><br></p>
                        <!--<p style="vertical-align:inherit;"><span style="color: #FF0000;"><span
                                style="color: #FF0000;">【额外赠送】内部整理</span>写作必备资料库介绍</span>：</p>-->
                        <p style="vertical-align:inherit;"><br></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/DymMZcgYXA4yYcQ.png"
                                width="100%" alt="DymMZcgYXA4yYcQ.png"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="0.9007971656333038" data-w="1129"></p>
<!--                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/HP1xGvssRvJ4XGj.jpg"
                                width="100%" alt="HP1xGvssRvJ4XGj.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="1.3907692307692308" data-w="1300"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/XZdEca9wA3b03Wg.jpg"
                                width="100%" alt="XZdEca9wA3b03Wg.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="1.166538164996145" data-w="1297"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/jj8Ksh1GKJm22P6.jpg"
                                width="100%" alt="jj8Ksh1GKJm22P6.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="1.3692307692307693" data-w="1300"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/spM1XvXC5ycmmqP.jpg"
                                width="100%" alt="spM1XvXC5ycmmqP.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="1.5096227867590455" data-w="1299"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/Egy38k5Tjac8JBp.jpg"
                                width="100%" alt="Egy38k5Tjac8JBp.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="1.2192307692307693" data-w="1300"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/mGP0VLl00fgfGGV.jpg"
                                width="100%" alt="mGP0VLl00fgfGGV.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="0.24761904761904763" data-w="840"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/uY3B72Be4t5rXRF.jpg"
                                width="100%" alt="uY3B72Be4t5rXRF.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="0.35144927536231885" data-w="828"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/ii1H11gYGQ971v4.jpg"
                                width="100%" alt="ii1H11gYGQ971v4.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="0.7847478474784748" data-w="813"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/JBrs84WpS4S4X7a.jpg"
                                width="100%" alt="JBrs84WpS4S4X7a.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;vertical-align: inherit; width: 100%;"
                                data-ratio="0.14514145141451415" data-w="813"></p>
                        <p style="vertical-align: inherit;"><img
                                src="/static/picture/pdDDn0zYZmWdwDY.jpg"
                                width="100%" alt="pdDDn0zYZmWdwDY.jpg"
                                style="max-width: 100% !important;box-sizing:border-box;caret-color: red; vertical-align: inherit; width: 100%;"
                                data-ratio="0.6059113300492611" data-w="812"><br></p>-->
                        <p style="vertical-align: inherit;"><br></p>
                        <section class="_135editor" data-role="paragraph"><p
                                style="vertical-align:inherit;"><br></p></section>
                      </section>
                    </section>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="vip-why">
        <div class="container">
          <h2><span>我们的优势</span></h2>
          <p class="desc">一直被模仿，从未被超越</p>
          <div class="items clearfix">
            <div class="item">
              <span class="bg-color"><i class="fa fa-arrow-up"></i></span>
              <div>
                <h4>更新及时</h4>
                <p>专人上传，每天更新</p>
              </div>
            </div>
            <div class="item">
              <span class="bg-color"><i class="fa fa-boxes"></i></span>
              <div>
                <h4>精选资源</h4>
                <p>各类资源，满足需求</p>
              </div>
            </div>
            <div class="item">
              <span class="bg-color"><i class="fa fa-cloud-download-alt"></i></span>
              <div>
                <h4>高速下载</h4>
                <p>专属网盘，极速体验</p>
              </div>
            </div>
            <div class="item">
              <span class="bg-color"><i class="fa fa-user-clock"></i></span>
              <div>
                <h4>7x24h服务</h4>
                <p>专人客服，随时联系</p>
              </div>
            </div>
          </div>
        </div>
      </div>
<!--      <Login v-model="showLogin" @success="loginSuccess"></Login>-->
      <Pay v-model="showPay" :payInfo="itemPay" @success="paySuccess"></Pay>
    </div>
  </div>
</template>

<script>

  import Login from "@/components/Login";
  import Pay from "@/components/Pay";
  import {axios as http} from "@/apis/base/request";
  export default {
    name: "VipView",
    components: {
      Login,
      Pay
    },
    data() {
      return {
        memberType:[],
        itemPay:{},
        showLogin:false,
        showPay:false

      };
    },
    created(){
      this.$utils.setPageTitle('开通会员')
      console.log(2222)
      setTimeout( () =>{
        this.showMemberType();
      },1000)

    },
    methods:{
      loginShow(){
        // this.showLogin=true;
        this.$message.error("亲，右上角~~请先微信扫码登录！")
      },
      loginSuccess(){
        this.wechatPay(this.itemPay)

      },
      paySuccess(){
        // console.log('paySuccess');
        this.getUserInfo()


      },
      wechatPay(item){
          this.itemPay=item;
          if(!this.$store.getters.token){
            this.loginShow();
          }else{
            this.showPay=true;
          }

      },
      getUserInfo(){
        this.$apis.userInfo({}).then(res=>{
          let userInfo=res.records;
          this.$store.dispatch('user/updateUserInfo', userInfo)
          // this.$store.dispatch('user/updateToken', token)
        })
      },
      showMemberType(){
        this.$apis.showMemberType().then(res=>{
          this.memberType=res.records.map_type;

        })
      },
    },
    mounted:function(){
      // this.showMemberType();
      this.$nextTick(()=>{

      });



    }
  };
</script>
<style>
  body {
    background: #f8f8f8 !important
  }

</style>
<style scoped>

  .main {
    background: #f9f9f9;;
  }
  .actives {
    background: none !important;
    color:  #3b8efa!important;
  }


  .content-wrap {
    margin: 0;
    float: none;
  }

  .vip-desc {
    text-align: center;
    font-size: 14px;
    color: #8a92a9;
    margin-bottom: 30px;
  }

  .vip-article {
    background: #fff;
    padding: 30px 20px 2px;
    margin-bottom: 20px;
    border-radius: 3px;
    margin: -50px auto 50px;
    position: relative;
    box-shadow: 0 4px 16px rgba(211, 217, 228, .4);
    border-radius: 10px;
  }

  .bgbtn {
    text-align: center;
    margin: 0px auto 30px;
  }

  .bgbtns {
    border-radius: 50px;
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background-color: #000;
    color: #ffffff;
  }
</style>
